import { createBrowserRouter } from 'react-router-dom'
import Layout from '../layout/layout'
import { lazy, Suspense } from "react"
import Login from "../pages/login"
import Register from '../pages/register'
const Home = lazy(() => import('../pages/home'))
const List = lazy(() => import('../pages/list'))
const My = lazy(() => import('../pages/my'))

const Order = lazy(() => import('../pages/order'))
const Role = lazy(() => import('../pages/role'))
const Chat = lazy(() => import('../pages/chat'))
function withSuspense(Component) {
    return (
        <Suspense fallback={<h3>Loading</h3>}>
            <Component></Component>
        </Suspense>
    )
}
const router = createBrowserRouter(
    [
        {
            path: '/layout',
            element: <Layout></Layout>,
            children: [
                {
                    path: '',
                    element: withSuspense(Home)
                },
                {
                    path: '/layout/list',
                    element: withSuspense(List)
                },
                {
                    path: '/layout/my',
                    element: withSuspense(My)
                },
                {
                    path: '/layout/order',
                    element: withSuspense(Order)
                },
                {
                    path: '/layout/role',
                    element: withSuspense(Role)
                },
                {
                    path: '/layout/chat',
                    element: withSuspense(Chat)
                }
            ]
        },
        {
            path: "/",
            element: <Login></Login>
        },
        {
            path: "/register",
            element: <Register></Register>
        }
    ]
)
export default router